<template>
  <div class="intelligent-btn-com">
    <div class="right-btn" :class="{ disable: isVisitor || isLock }">
      <div v-for="(tip, index) in intelliFuncList" :key="'right' + index">
        <span v-if="tip.tooltip === 'diver'" class="divider"></span>
        <a-tooltip v-else placement="left">
          <template slot="title">
            <span>{{ tip.tooltip }}</span>
          </template>
          <div
            :class="{
              'btn function-btn-spacing': !isVisitor && !isLock,
              'btn-disable function-btn-spacing': isVisitor || isLock,
            }"
            @click="clickFunction(tip.click)"
          >
            <a-icon-font
              :type="tip.icon"
              :style="{
                color: tip.select ? '#6973ff' : '#5d637e',
                opacity: tip.select ? 1 : tip.opacity,
              }"
            />
          </div>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import { getLocalStorage, setLocalStorage } from '@/util/util'

@Component
export default class IntelligentRecommendation extends Vue {
  // 是否为第一次唤醒数据表
  private isFirstSelectNode: boolean = true

  // 记录上一次选择数据列的数目
  private lastSelectedColumnNum: number = 0

  // 首次唤醒显示智能推荐
  @Watch('selectedNode')
  public changeNode(node: any) {
    if (this.isVisitor || this.isLock) {
      return
    }

    if (!this.isFirstSelectNode) {
      return
    }
    const enableVRPanelRecommend = ['', 'true'].includes(
      getLocalStorage('enableVRPanelRecommend')
    ) // 默认是开启的
    if (node && +node.type !== 6) {
      this.intelliFuncList[0].select = enableVRPanelRecommend
      this.intelliFuncList[1].select = true
      this.intelliFuncList[2].select = false
      this.intelliFuncList[3].select = false
      DataViewStore.setIntelliRecommendationType('DataFiltering')
      DataViewStore.toggleEnableVRPanelRecommend(enableVRPanelRecommend)
      this.isFirstSelectNode = false
    }
  }

  @Watch('selectedColumns')
  public changeColumns() {
    if (this.isVisitor || this.isLock) {
      return
    }

    if (!this.intelliFuncList[0].select) {
      return
    }

    if (this.lastSelectedColumnNum === 0 && this.selectedColumns.length === 0) {
      return
    }

    if (
      this.selectedColumns.length === 0 &&
      !DataViewStore.enableVRPanelRecommend
    ) {
      return
    }

    if (!this.intelliFuncList[2].select && !this.intelliFuncList[3].select) {
      this.intelliFuncList[1].select = true
      DataViewStore.setIntelliRecommendationType('DataFiltering')
    }
    this.lastSelectedColumnNum = this.selectedColumns.length
    DataViewStore.toggleEnableVRPanelRecommend(true)
  }

  @Watch('isVRPanelRecommend')
  public closeVRPanel() {
    if (this.isVisitor || this.isLock || this.isVRPanelRecommend) {
      return
    }

    if (!this.intelliFuncList[0].select) {
      return
    }

    this.intelliFuncList[1].select = false
    this.intelliFuncList[2].select = false
    this.intelliFuncList[3].select = false
  }

  // 实例销毁时重置智能推荐状态
  destroyed() {
    DataViewStore.toggleEnableVRPanelRecommend(false)
  }

  // 选择的节点
  public get selectedNode() {
    return DataViewStore.selectNode
  }

  // 选择的数据列
  public get selectedColumns() {
    return DataViewStore.selectedColumns
  }

  // 智能推荐面板的显示状态
  public get isVRPanelRecommend() {
    return DataViewStore.enableVRPanelRecommend
  }

  public intelliFuncList: any[] = [
    {
      tooltip: '打开/关闭智能推荐',
      click: 'toggleIntelligentRecommendation',
      icon: 'iconlvbeifen',
      select: false,
      opacity: 0.45,
    },
    {
      tooltip: '数据清洗推荐',
      click: 'toggleDataFiltering',
      icon: 'iconzhinengqingxi',
      select: false,
      opacity: 1,
    },
    {
      tooltip: '数理统计推荐',
      click: 'toggleDataStatistics',
      icon: 'iconshulitongji',
      select: false,
      opacity: 1,
    },
    {
      tooltip: '可视化推荐',
      click: 'toggleVisualRecommendation',
      icon: 'iconkeshihuatuijianbeifen',
      select: false,
      opacity: 1,
    },
  ]

  public get isVisitor() {
    return DataViewStore.isVisitor
  }

  public get isLock() {
    return DataViewStore.getLock
  }

  // 多个功能 统一点击入口
  public clickFunction(functionName: string) {
    if (this.isVisitor || this.isLock) {
      return
    }
    switch (functionName) {
      case 'toggleIntelligentRecommendation':
        this.toggleIntelligentRecommendation()
        break
      case 'toggleDataFiltering':
        this.toggleDataFiltering()
        break
      case 'toggleDataStatistics':
        this.toggleDataStatistics()
        break
      case 'toggleVisualRecommendation':
        this.toggleVisualRecommendation()
        break
      default:
        break
    }
  }

  // toggle 智能推荐，启用/禁用 智能推荐功能
  public toggleIntelligentRecommendation() {
    if (this.isVisitor || this.isLock) {
      return
    }

    this.intelliFuncList[0].select = !this.intelliFuncList[0].select
    if (this.intelliFuncList[0].select) {
      this.intelliFuncList[1].select = true
    } else {
      this.intelliFuncList[1].select = false
    }
    this.intelliFuncList[2].select = false
    this.intelliFuncList[3].select = false

    DataViewStore.toggleEnableVRPanelRecommend(this.intelliFuncList[0].select)
    DataViewStore.setIntelliRecommendationType('DataFiltering')
    setLocalStorage('enableVRPanelRecommend', this.intelliFuncList[0].select)
  }

  // toggle 数据清洗
  public toggleDataFiltering() {
    if (this.isVisitor || this.isLock) {
      return
    }

    this.intelliFuncList[1].select = true
    this.intelliFuncList[2].select = false
    this.intelliFuncList[3].select = false
    if (!this.intelliFuncList[0].select) {
      this.intelliFuncList[0].select = true
    }

    DataViewStore.toggleEnableVRPanelRecommend(true)
    DataViewStore.setIntelliRecommendationType('DataFiltering')
  }

  // toggle 数理统计
  public toggleDataStatistics() {
    if (this.isVisitor || this.isLock) {
      return
    }

    this.intelliFuncList[1].select = false
    this.intelliFuncList[2].select = true
    this.intelliFuncList[3].select = false
    if (!this.intelliFuncList[0].select) {
      this.intelliFuncList[0].select = true
    }

    DataViewStore.toggleEnableVRPanelRecommend(true)
    DataViewStore.setIntelliRecommendationType('DataStatistics')
  }

  // toggle 可视化推荐
  public toggleVisualRecommendation() {
    if (this.isVisitor || this.isLock) {
      return
    }

    this.intelliFuncList[1].select = false
    this.intelliFuncList[2].select = false
    this.intelliFuncList[3].select = true
    if (!this.intelliFuncList[0].select) {
      this.intelliFuncList[0].select = true
    }

    DataViewStore.toggleEnableVRPanelRecommend(true)
    DataViewStore.setIntelliRecommendationType('VisualRecommendation')
  }
}
</script>

<style scoped lang="less">
/* 智能推荐开关 */
.intelligent-btn-com {
  align-items: center;
  background-color: #fff;
  border-left: 1px solid #d8d8d8;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  height: 100%;
  justify-content: flex-start;
  width: 36px;

  .right-btn {
    align-items: center;
    float: top;

    .btn {
      align-items: center;
      border-radius: 2px;
      cursor: pointer;
      display: flex;
      font-size: 16px;
      margin: 3px 0 1px;
      padding: 7px;
      position: relative;

      &:hover {
        background-color: rgba(105, 115, 255, 0.1);
        color: #6973ff;
      }

      .btn-divider {
        border-right: 1px solid #5d637e;
        height: 16px;
        margin: 0 5px;
        width: 1px;
      }
    }
  }
}
</style>
